<template>
  <div class="choice-container">
    <el-card style="overflow-x:visible">
      <form-container @searchSubject="getQuestionsList($event)"/>
      <!-- 消息提示 警告 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon :closable="false"></el-alert>
      <!-- tabs栏 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="number" label="试题编号" width="130"></el-table-column>
        <el-table-column prop="subject" label="学科" width="90"></el-table-column>
        <el-table-column prop="catalog" label="目录" width="100"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType==1">单选</span>
            <span v-else-if="scope.row.questionType==2">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="250">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="200">
          <template slot-scope="scope">{{scope.row.addDate | dateFormat}}</template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="70">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty==1">简单</span>
            <span v-else-if="scope.row.difficulty==2">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120"></el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="90">
          <template slot-scope="scope">
            <span v-if="scope.row.chkState==0">待审核</span>
            <span v-else-if="scope.row.chkState==1">已审核</span>
            <span v-else-if="scope.row.chkState==2">已拒绝</span>
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="130"></el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120"></el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.publishState==0&&scope.row.chkState==1">已下架</span>
            <span v-else-if="scope.row.publishState==1&&scope.row.chkState==1">已发布</span>
            <span v-else-if="scope.row.publishState==0&&scope.row.chkState==0">待发布</span>
            <span v-else-if="scope.row.publishState==1&&scope.row.chkState==0">待发布</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250" class="admen">
          <template slot-scope="scope">
            <el-button type="text" @click="getquestionId (scope.row)">预览</el-button>
            <el-button
              type="text"
              :disabled="scope.row.chkState!==0"
              @click="auditbtn(scope.row.id)"
            >审核</el-button>
            <el-button
              type="text"
              :disabled="scope.row.publishState==1"
              @click="editQuestion(scope.row)"
            >修改</el-button>
            <el-button
              type="text"
              @click="undercarriage(scope.row)"
            >{{scope.row.publishState==0?'上架':'下架'}}</el-button>
            <el-button
              :disabled="scope.row.publishState==1"
              @click.prevent="deleteRow(scope.row.id)"
              type="text"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryList.page"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="queryList.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 详情预览文本框 -->
      <el-dialog
        :destroy-on-close="true"
        title="题目预览"
        :visible.sync="previewDialogVisible"
        width="56%"
        height="50%"
      >
        <questions-preview :question="question" v-if="previewDialogVisible"/>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="previewDialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
      <!-- 审核弹框 -->
      <el-dialog title="题目审核" :visible.sync="auditdialogVisible" width="30%">
        <el-form ref="auditFormRef" :model="auditForm">
          <el-form-item>
            <el-radio-group v-model="auditForm.chkState">
              <el-radio label="1">通过</el-radio>
              <el-radio label="2">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-input
              type="textarea"
              v-model="auditForm.chkRemarks"
              :rows="3"
              placeholder="请输入审核意见"
            ></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="auditdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="audit">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import FormContainer from '@/components/questions/search-form'
import {
  getQuestionsChoice,
  editPublishState,
  getQuestionsPart,
  auditQuestions,
  delQuestion
} from '@/api/questions.js'
import QuestionsPreview from '@/components/questions/prevoewDialog'
export default {
  name: 'ChoiceContainer',
  components: {
    FormContainer,
    QuestionsPreview
  },
  data() {
    return {
      activeName: 'first',
      tableData: [],
      // 请求参数
      queryList: {
        page: 1,
        pagesize: 5
      },
      // 总条数
      total: 0,
      // 试题预览文本框
      previewDialogVisible: false,
      question: {},
      // 试题审核文本框
      auditdialogVisible: false,
      // 试题id
      questionID: '',
      // 审核表单 1 通过 2 不通过
      auditForm: {
        chkState: '1',
        chkRemarks: ''
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 获取基本题库数据
    async getQuestionsList(e) {
      try {
        const { data } = await getQuestionsChoice(e || this.queryList)
        this.tableData = data.items
        this.total = data.counts
      } catch (err) {
        this.$message.error('获取失败')
      }
    },
    // 每页多少条发生改变
    handleSizeChange(val) {
      this.queryList.pagesize = val
      this.getQuestionsList()
    },
    // 页数发生改变
    handleCurrentChange(val) {
      this.queryList.page = val
      this.getQuestionsList()
    },
    // tabs栏
    async handleClick(tab) {
      if (tab.index === '1') {
        this.queryList.chkState = 0
        this.getQuestionsList()
      } else if (tab.index === '2') {
        this.queryList.chkState = 1
        this.getQuestionsList()
      } else if (tab.index === '3') {
        this.queryList.chkState = 2
        this.getQuestionsList()
      } else if (tab.index === '0') {
        this.queryList = { page: 1, pagesize: 5 }
        this.getQuestionsList()
      }
    },
    // // 获取该行题目的数据
    getquestionId(data) {
      this.question = data
      this.previewDialogVisible = true
    },
    // 点击审核显示文本框
    auditbtn(id) {
      this.auditdialogVisible = true
      this.questionID = id
    },
    // 点击确定按钮 提交审核请求
    async audit() {
      try {
        await auditQuestions(this.questionID, {
          chkRemarks: this.auditForm.chkRemarks,
          chkState: +this.auditForm.chkState,
          id: this.questionID
        })
        this.auditdialogVisible = false
        this.getQuestionsList()
      } catch (err) {
        this.$message.error('提交失败')
      }
    },
    // 点击修改按钮跳转
    async editQuestion(rowQuest) {
      const { data } = await getQuestionsPart(rowQuest.id)
      // 添加城市和选项
      rowQuest.province = data.province
      rowQuest.options = data.options
      this.$store.commit('questionDetail', rowQuest)
      this.$router.push({
        path: '/questions/new'
      })
    },

    // 下架题目
    async undercarriage(data) {
      if (data.publishState) {
        const confirmStr = await this.$confirm(
          '您确认下架这道题目吗?, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)
        if (confirmStr !== 'confirm') return
        try {
          await editPublishState(data.id, 0)
          this.$message.success('下架成功')
          this.getQuestionsList()
        } catch (err) {
          this.$message.error('下架失败')
        }
      } else {
        // 上架题目
        const confirmStr = await this.$confirm(
          '您确认上架这道题目吗?, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)
        if (confirmStr !== 'confirm') return
        try {
          await editPublishState(data.id, 1)
          this.$message.success('上架成功')
          this.getQuestionsList()
        } catch (err) {
          this.$message.error('上架失败')
        }
      }
    },
    // 删除精选题目
    async deleteRow(id) {
      const confirmStr = await this.$confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmStr !== 'confirm') return
      try {
        await delQuestion(id)
        this.$message.success('删除成功')
      } catch (err) {
        this.$message.error('删除失败')
      }
      this.getQuestionsList()
    }
  },
  created() {
    this.getQuestionsList()
  },
  mounted() {}
}
</script>

<style lang='less' scoped>
.choice-container {
  .el-table__cell {
    .cell {
      text-align: center;
      .el-button--text {
        width: 24px;
        font-size: 12px;
      }
    }
  }
}
</style>
